<jsp:include page="../fragments/header.jsp">
	<jsp:param name="title" value="New Customer" />
</jsp:include>

<form name="addNewCustomerForm" action="customer_add" method="post">
	<table cellpadding="5px">
		<tbody>
			<tr>
				<td>First Name</td>
				<td><input type="text" name="firstName" /></td>
				<td><span id="firstName" style="display: none; color: red;">Please enter the first name</span></td>
			</tr>
			<tr>
				<td>Last Name</td>
				<td><input type="text" name="lastName" /></td>
				<td><span id="lastName" style="display: none; color: red;">Please enter the last name</span></td>
			</tr>
			<tr>
				<td>Gender</td>
				<td><select name="gender">
						<option value="" selected="selected">Please Select...</option>
						<option value="MALE">Male</option>
						<option value="FEMALE">Female</option>
				</select>
				</td>
				<td><span id="gender" style="display: none; color: red;">Please select gender</span></td>
			</tr>
			<tr>
				<td>Birth date</td>
				<td><input type="text" name="birthDate" /></td>
				<td><span id="birthDate" style="display: none; color: red;">Please enter your birth date in format (2013-09-20)</span></td>
			</tr>
			<tr>
				<td>Email</td>
				<td><input type="text" name="email" /></td>
				<td><span id="email" style="display: none; color: red;">Please enter the email</span></td>
			</tr>
			<tr>
				<td colspan="3"><b>Home Address</b></td>
			</tr>
			<tr>
				<td>Building number</td>
				<td><input type="text" name="buildingNumber" /></td>
				<td><span id="buildingNumber" style="display: none; color: red;">Please enter the building number</span></td>
			</tr>
			<tr>
				<td>Street</td>
				<td><input type="text" name="street" /></td>
				<td><span id="street" style="display: none; color: red;">Please enter the street</span></td>
			</tr>
			<tr>
				<td>City</td>
				<td><input type="text" name="city" /></td>
				<td><span id="city" style="display: none; color: red;">Please enter the city</span></td>
			</tr>
			<tr>
				<td>State</td>
				<td><input type="text" name="state" /></td>
				<td><span id="state" style="display: none; color: red;">Please enter the state</span></td>
			</tr>
			<tr>
				<td>ZipCode</td>
				<td><input type="text" name="zipCode" /></td>
				<td><span id="zipCode" style="display: none; color: red;">Please enter the zipcode</span></td>
			</tr>
			<tr>
				<td>Country</td>
				<td><input type="text" name="country" /></td>
				<td><span id="country" style="display: none; color: red;">Please enter the country</span></td>
			</tr>
			<tr>
				<td colspan="3"><b>Telephone</b></td>
			</tr>
			<tr>
				<td>Country Code</td>
				<td><input type="text" name="countryCode" /></td>
				<td><span id="countryCode" style="display: none; color: red;">Please enter the telephone country code</span></td>
			</tr>
			<tr>
				<td>Number</td>
				<td><input type="text" name="number" /></td>
				<td><span id="number" style="display: none; color: red;">Please enter the telephone number</span></td>
			</tr>
		
		</tbody>
		</table>
	<input type="button" class="btn btn-default btn-block" value="Add" onclick="validateAddCustomerForm()">
</form>

<form action="${pageContext.request.contextPath}/customer_info">
	<button class="btn btn-default">
		<b>Cancel</b>
	</button>
</form>

<jsp:include page="../fragments/footer.jsp" />